<template>
  <view :class="['h-tab-pane-content']" v-if="tabValue" :style="{transform: `translateX(${left}px)`}">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: "hTabPane",
  inject: ['hTab'],
  props: {
    label: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      nameActive: '',
      left: 0
    }
  },
  mounted() {
    this.hTab.handleAdd(this)
    // if(this.hTab.value) {
    //   this.nameActive = this.hTab.value
    // }
  },
  computed: {
    tabValue() {
      return this.hTab.nameActive === this.name
    },
    tabName() {
      return this.hTab.nameActive
    }
  },
  methods: {
  },
  watch: {
    tabName() {
      this.left = '100%'
      setTimeout(() => {
        this.left = 0
      }, 0)
    }
  }
}
</script>

<style>
.h-tab-pane-content {
  width: 100%;
  min-height: 100rpx;
  height: auto;
  max-height: calc(100vh - 80rpx);
  overflow: hidden;
  padding: 20rpx;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: all linear .26s;
}
</style>
